<template>
	<view>
		<view class="bg" />
		<view class="top">
			<view style="display: flex;flex-direction: column;align-items: center;width: 300rpx;">
				<span style="color: white;font-size: 24px;margin-bottom: 12px;">{{shopList.shopMoney}}</span>
				<span style="color: white;font-size: 18px;margin-bottom: 24px;">当前现金余额(元)</span>
				<button
					style="font-size:14px;width: 142px;background-color: #FF6532;color: white;border-radius: 28px;height: 34px;line-height: 34px;" @click="sqtx()">提现</button>
			</view>
			<view style="width: 2px;height: 120px;background-color: #ffffff33;"></view>
			<view
				style="display: flex;flex-direction: column;align-items: center;width: 300rpx;justify-content: space-around;">
				<span style="color: white;font-size: 14px;">累计收入（元）：1700</span>
				<span style="color: white;font-size: 14px;">累计提现(元)：200</span>
				<span style="color: white;font-size: 14px;"></span>
			</view>
		</view>
		<view class="content" style="margin-bottom: 12px;">
			<span style="font-size: 20px;">收支明细</span>
			<view style="height: 4px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<div class="transaction-item">
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<div class="transaction-type">XX车辆清洗、抛光打蜡服务</div>
					<div class="transaction-time">核销时间:2022-10-12 11:09</div>
				</view>

				<div class="transaction-amount">+ 50.00</div>

			</div>
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<div class="transaction-item">
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<div class="transaction-type">提现</div>
					<div class="transaction-time">提现时间:2022-10-12 11:09</div>
				</view>
				<div class="transaction-amount">+ 200.00</div>

			</div>
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<div class="transaction-item">
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<div class="transaction-type">XX车辆清洗、抛光打蜡服务</div>
					<div class="transaction-time">核销时间:2022-10-12 11:09</div>
				</view>
				<div class="transaction-amount">+ 50.00</div>

			</div>
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<div class="transaction-item">
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<div class="transaction-type">XX车辆清洗、抛光打蜡服务</div>
					<div class="transaction-time">核销时间:2022-10-12 11:09</div>
				</view>
				<div class="transaction-amount">+ 50.00</div>

			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId:0,
				shopList:{}
			}
		},
		methods: {
			sqtx(){
				uni.navigateTo({
					url: '/pages/index/sqtx/sqtx',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getShopInfo(){
				let that = this
				this.$http({
					url: '/api/shop/shop/'+that.shopId,
					method: 'get',
					success(res) {
						if (res.data.code == 200) {
							that.shopList = res.data.data
							console.log(that.shopList)
						} else {
							console.log("sad")
						}
					}
				})
			}
		},
		onLoad(){
			this.shopId = uni.getStorageSync("shopId");
			this.getShopInfo()
			console.log(this.shopList)
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		background-color: #3183FB;
		height: 172px;
	}

	.content {
		position: relative;
		top: -186px;
		left: 22.5rpx;
		border-radius: 20px;
		width: 94%;
		background-color: white;
		padding: 28px 16px;
		box-sizing: border-box;
	}

	.top {
		display: flex;
		position: relative;
		justify-content: space-between;
		top: -172px;
		left: 22.5rpx;
		width: 94%;
		padding: 28px 16px;
		box-sizing: border-box;
	}

	.transaction-list {
		background-color: white;
		width: 300px;
		margin: 50px auto;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}

	.transaction-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		height: 60px;
	}

	.transaction-type {
		font-size: 14px;
		color: #333;
	}

	.transaction-amount {
		font-size: 14px;
		color: red;
		font-weight: bold;
	}

	.transaction-time {
		font-size: 12px;
		color: #999;
	}
</style>